<template>
	<view>
		<scroll-view :style="{height: scrollviewH+'rpx'}" scroll-y>
			<radio-group @change="radioChange">
				<view style="display:flex; flex-wrap:wrap; align-content:center;">
					<view v-for="(item, index) in seats"
						style="width:150rpx; height:150rpx; display:flex; flex-direction:column; justify-content:center; align-items:center; padding: 20rpx 20rpx;">
						<label :class="item.canSelect?'free':'notfree'"
							style="display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; border-radius: 15rpx;">
							<view>
								<radio :value="item.id" :disabled="!item.canSelect" />
							</view>
							<view>{{item.seatNo}}</view>
						</label>
					</view>
				</view>
			</radio-group>
		</scroll-view>

		<view style="padding: 20rpx 20rpx; display: flex;">
			<button class='my-btn-primary' @click="onTapBtn">确定</button>
		</view>

	</view>
</template>

<script>
	import {
		MyTip
	} from '../../components/ssty/common.js';
	import {
		querySeatsForSelect,
		bindSeatToOrderV2,
		changeSeat_bind
	} from '@/api/fsh.js';
	const app = getApp();

	export default {
		data() {
			return {
				seats: [],
				scrollviewH: 750
			}
		},
		onLoad(options) {
			console.log("selectSeat::onLoad| options=%o", options);
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log(res.screenHeight); //屏幕高度  注意这里获得的高度宽度都是px 需要转换rpx
					console.log(res.windowWidth); //可使用窗口宽度
					console.log(res.windowHeight); //可使用窗口高度
					console.log(res.screenWidth); //屏幕宽度
					var rpx = (res.screenHeight * (750 / res.windowWidth)) //将px 转换rpx

					that.scrollviewH = rpx - 300;

					console.log("selectSeat::onReady| screenHeight=", res.screenHeight);
				}
			});
			this.selectedSeatId = null;

			this.ypOdId = options.ypOdId;
			this.isChangeSeat = options.isChangeSeat;
			this.loadSeats(this.ypOdId);
		},

		methods: {
			loadSeats(ypOdId) {
				uni.showLoading({
					title: '正在加载中...'
				});
				querySeatsForSelect(ypOdId).then(res => {
					uni.hideLoading();
					this.seats = res.entity.seats;
				}).catch(err => {
					uni.hideLoading();
					console.log("loadSeats fail ", err);

					uni.showModal({
						content: err.msg,
						showCancel: false,
						complete: () => {
							// uniapp限制了uni.switchTab后不能带参数
							app.globalData.fshingPageYpOdId = this.ypOdId;
							uni.switchTab({
								url: '/pages/fsh_main/fishing'
							});
						}
					})
				});
			},

			radioChange(e) {
				this.selectedSeatId = parseInt(e.detail.value);
			},

			onTapBtn() {
				if (!this.selectedSeatId) {
					MyTip('请选择钓位');
					return;
				}

				uni.showLoading({
					title: '正在保存中...'
				});
				if (this.isChangeSeat) {
					changeSeat_bind(this.ypOdId, this.selectedSeatId).then(res => {
						uni.hideLoading();
						app.globalData.fshingPageYpOdId = this.ypOdId;
						uni.switchTab({
							url: '/pages/fsh_main/fishing'
						});
					}).catch(err => {
						console.log("onTapBtn fail:", err);
						uni.hideLoading();
						MyTip(err.msg);
					});
				} else {
					bindSeatToOrderV2(this.ypOdId, this.selectedSeatId).then(res => {
			 		uni.hideLoading();
						app.globalData.fshingPageYpOdId = this.ypOdId;
						uni.switchTab({
							url: '/pages/fsh_main/fishing'
						});
					}).catch(err => {
						console.log("onTapBtn fail:", err);
						uni.hideLoading();
						MyTip(err.msg);
					});
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: $my-page-bkg-color;
	}

	.free {
		background-color: lightgreen;
	}

	.notfree {
		background-color: lightgray;
	}
</style>
